<template>
    <div class="common-layout">

        <div class="cl-left">
            <div>
                <PullDownVue @sync-tl="tl"  ref="demo"></PullDownVue>
            </div>
        </div>
        <div class="cl-right">
            <div class="cr-header">
                <div class="eh-top">
                    <div class="et-left">
                        <p>代码生成器</p>
                        <span>删除左侧配置菜单:删除行->保存->删除菜单</span>
                    </div>
                    <div class="et-right">
                        <ul>
                            <li><el-icon>
                                    <Check />
                                </el-icon>保存</li>
                            <li><el-icon>
                                    <Plus />
                                </el-icon>新建</li>
                            <li><el-icon>
                                    <Document />
                                </el-icon>生成Vue页面</li>
                            <li><el-icon>
                                    <Document />
                                </el-icon>生成app页面</li>
                            <li><el-icon>
                                    <Tickets />
                                </el-icon>生成Model页面</li>
                            <li><el-icon>
                                    <Document />
                                </el-icon>生成业务类</li>
                            <li><el-icon>
                                    <Delete />
                                </el-icon>删除菜单</li>
                        </ul>
                    </div>
                </div>
                <!-- gutter 属性来指定列之间的间距，其默认值为0。 -->
                <el-form ref="ruleFormRef" label-width="120px" class="demo-ruleForm" status-icon size="large">
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="主 键 ID：">
                                <el-input placeholder="请输入主 键 ID" disabled v-model="tableList.num1" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="父 级 ID：" required="true">
                                <el-input-number v-model="tableList.num2" :min="0" controls-position="right"
                                    @change="handleChange" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="项目类库：" required="true">
                                <el-select v-model="tableList.num3.label" class="m-2" size="large"
                                    placeholder="代码生成存放的位置" readonly placement="left-start">
                                    <el-option v-for="item in tableList.num3" :key="item.value" :label="item.label"
                                        :value="item.label" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="表中文名：" required="true">
                                <el-input placeholder="请输入表中文名" @blur="blur1($event)" v-model="tableList.num4" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="表 别 名：" required="true">
                                <el-input placeholder="默认与实际表名相同" v-model="tableList.num5" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="实际表名：">
                                <el-input placeholder="请输入实际表名" v-model="tableList.num6" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="文件夹名：" required="true">
                                <el-input placeholder="生成文件所在类库中的文件夹名(文件夹可以不存在)" v-model="tableList.num7" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="明细表名：">
                                <el-input placeholder="明细表中文名字" v-model="tableList.num8" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="明 细 表：">
                                <el-input placeholder="数据库的表名" v-model="tableList.num9" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="快捷编辑：">
                                <el-input placeholder="快捷编辑字段" v-model="tableList.num10" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="16">
                            <el-form-item label="排序字段：">
                                <el-input placeholder="非自增主键需要输入排序字段" v-model="tableList.num11" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="Vue路径：">
                                <el-input placeholder="Vue项目所在绝对路径，到views文件夹,如：E:/app/src/views"
                                    v-model="tableList.num12" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="app路径：">
                                <el-input placeholder="uniapp项目所在绝对路径，到pages文件夹,如：E:/uniapp/pages"
                                    v-model="tableList.num13" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

            <div class="el-main">
                <el-alert title="1、如果需要修改表结构，请在数据库修改，再点同步表结构->生成vue页面->生成model。 2、修改编辑行后需要点击生成model、生成vue页面"
                    type="warning" :closable="false" />
                <div class="eh-top">
                    <div class="et-left">
                        <p>表结构</p>
                        <span>数据库表结构发生变化时请点【同步表结构】</span>
                    </div>
                    <div class="et-right">
                        <ul>
                            <li>代码生成器参数文档</li>
                            <li>删除行数据</li>
                            <li>同步表结构</li>
                        </ul>
                    </div>
                </div>
                <ListStructureVue></ListStructureVue>
            </div>

        </div>
    </div>


</template>
<script setup>
import PullDownVue from '@/components/CodeGeneration/PullDown.vue';
import ListStructureVue from '@/components/CodeGeneration/ListStructure.vue';

// 导入图标组件
import { Plus, Check, Document, Tickets, Delete } from '@element-plus/icons-vue'
import { ref,nextTick } from 'vue';
const demo = ref(null)


const tableList = ref({
    num1: '',
    num2: 0,
    num3: [
        { value: 0, label: 'Autofac' },
        { value: 1, label: 'Autofac.Extensions.DependencyInjection' },
        { value: 2, label: 'AutoMapper' },
        { value: 3, label: 'CSRedisCore' },
        { value: 4, label: 'Dapper' },
        { value: 5, label: 'EFCore.BulkExtensions' },
        { value: 6, label: 'FastMember.Signed' },
        { value: 7, label: 'Microsoft.AspNetCore.Authentication.JwtBearer' },
        { value: 8, label: 'Microsoft.AspNetCore.JsonPatch' },
        { value: 9, label: 'Microsoft.AspNetCore.Mvc.NewtonsoftJson' },
        { value: 10, label: 'Microsoft.Bcl.AsyncInterfaces' },
        { value: 11, label: 'Microsoft.Bcl.HashCode' },
        { value: 12, label: 'Microsoft.Data.SqlClient' },
        { value: 13, label: 'Microsoft.EntityFrameworkCore.Abstractions' },
        { value: 14, label: 'Microsoft.EntityFrameworkCore' },
        { value: 15, label: 'Microsoft.EntityFrameworkCore.Proxies' },
        { value: 16, label: 'Microsoft.EntityFrameworkCore.Relational' },
        { value: 17, label: 'Microsoft.EntityFrameworkCore.SqlServer' },
        { value: 18, label: 'Microsoft.Extensions.Caching.Redis' },
        { value: 19, label: 'Microsoft.Extensions.DependencyModel' },
        { value: 20, label: 'Microsoft.Identity.Client' },
        { value: 21, label: 'Microsoft.IdentityModel.JsonWebTokens' },
        { value: 22, label: 'Microsoft.IdentityModel.Logging' },
        { value: 23, label: 'Microsoft.IdentityModel.Protocols' },
        { value: 24, label: 'Microsoft.IdentityModel.Protocols.OpenIdConnect' },
        { value: 25, label: 'Microsoft.IdentityModel.Tokens' },
        { value: 26, label: 'Microsoft.OpenApi' },
        { value: 27, label: 'MySqlConnector' },
        { value: 28, label: 'Newtonsoft.Json.Bson' },
        { value: 29, label: 'Newtonsoft.Json' },
        { value: 30, label: 'Npgsql' },
        { value: 31, label: 'Npgsql.EntityFrameworkCore.PostgreSQL' },
        { value: 32, label: 'Pomelo.EntityFrameworkCore.MySql' },
        { value: 33, label: 'Pomelo.JsonObject' },
        { value: 34, label: 'SkiaSharp' },
        { value: 35, label: 'StackExchange.Redis.StrongName' },
        { value: 36, label: 'Swashbuckle.AspNetCore.Swagger' },
        { value: 37, label: 'Swashbuckle.AspNetCore.SwaggerGen' },
        { value: 38, label: 'Swashbuckle.AspNetCore.SwaggerUI' },
        { value: 39, label: 'System.Configuration.ConfigurationManager' },
        { value: 40, label: 'System.Data.SqlClient' },
        { value: 41, label: 'System.IdentityModel.Tokens.Jwt' },
        { value: 42, label: 'System.Runtime.Caching' },
        { value: 43, label: 'System.Security.Cryptography.ProtectedData' },
        { value: 44, label: 'System.Xml.XPath.XmlDocument' },
        { value: 45, label: 'VOL.Demo' },
        { value: 46, label: 'VOL.System' },
        { value: 47, label: 'VOL.WebApi' },
        { value: 48, label: 'ZKWeb.System.Drawing' },
    ],
    num4: '',
    num5: '',
    num6: '',
    num7: '',
    num8: '',
    num9: '',
    num10: '',
    num11: '',
    num12: '',
    num13: ''
})

let tl = (v) => {
    tableList.value = v
    console.log(v);
}

// 父级ID
const num = ref(1)
const handleChange = (val) => {
    // val.value
}



let blur1 = (e) => {
    console.log(e);
}
</script>
<style scoped lang='scss'>
.common-layout {
    display: flex;
    width: 1700px;
    overflow: hidden;

    .cl-left {
        width: 200px;

        div {
            position: fixed;
        }
    }

    .cl-right {
        width: 85%;
        margin-left: 20px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .cr-header {

        border-bottom: 10px solid #eee;
        padding-bottom: 20px;
        --el-header-height: none;

        .el-form {
            display: block;
            margin-bottom: 20px;


            .el-form-item--large {
                margin-bottom: 0;
            }

            .el-input-number--large {
                width: 100%;
            }

            .el-select {
                width: 100%;
            }
        }

    }


}







.eh-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
    // padding: 10px 0;
    margin: 10px 0 25px;

    .et-left {
        display: flex;
        justify-content: left;
        align-items: center;

        p {
            font: bold 18px '黑体';
            margin-right: 20px;
            padding-bottom: 8px;
            border-bottom: 2px solid #333;
        }

        span {
            font-size: 13px;
            color: red;
            padding-bottom: 8px;
        }
    }

    .et-right ul {
        display: flex;
        flex-shrink: 0;
        flex-wrap: wrap;
        padding-right: 26px;

        li {
            display: flex;
            align-items: center;
            padding: 0 6px;
            font-size: 12px;
            color: #5a5f5e;
            padding-bottom: 8px;
        }
    }
}

.el-row {
    margin-bottom: 20px;

    :last-child {
        margin-bottom: 0;
    }

    .el-col {
        border-radius: 4px;
    }
}



.grid-content {
    border-radius: 4px;
    min-height: 36px;
    background: lightblue;
}
</style>